<template>
  <div class="order-detail-type-container">
    <nut-cell-group title="购票方式" class="purchase-type-container">
      <nut-cell>
        <div
          class="item"
          :class="{ active: !isSpeedTicket }"
          @click="
            () => {
              isSpeedTicket = false;
            }
          "
        >
          <div class="content">
            <div class="title">
              <div class="icon">
                <IconFont
                  font-class-name="iconfont"
                  class-prefix="icon"
                  name="tuipiao"
                />
              </div>
              <div class="txt">特惠出票</div>
            </div>
            <div class="desc">出票时间：5-30分钟左右</div>
          </div>
          <div class="price">
            <div class="title">
              <nut-price
                :price="info?.normalPayAmount"
                size="normal"
                :decimal-digits="2"
                :thousands="true"
              />
            </div>
            <div class="desc">
              优惠{{
                (info?.originalPrice - info?.normalPayAmount).toFixed(2)
              }}元
            </div>
          </div>
          <div class="operate">
            <Checked class="checked-icon" color="#ee0a24" />
            <CheckNormal class="check-normal-icon" color="#ee0a24" />
          </div>
        </div>
      </nut-cell>
      <nut-cell>
        <div
          class="item"
          :class="{ active: isSpeedTicket }"
          @click="
            () => {
              isSpeedTicket = true;
            }
          "
        >
          <div class="content">
            <div class="title">
              <div class="icon">
                <IconFont
                  font-class-name="iconfont"
                  class-prefix="icon"
                  name="shandian"
                />
              </div>
              <div class="txt">极速出票</div>
            </div>
            <div class="desc">出票时间：1-15分钟左右</div>
          </div>
          <div class="price">
            <div class="title">
              <nut-price
                :price="info?.quickPayAmount"
                size="normal"
                :decimal-digits="2"
                :thousands="true"
              />
            </div>
            <div class="desc">
              <!-- 优惠{{
                (info?.originalPrice - info?.normalPayAmount).toFixed(2)
              }}元 -->
              无优惠
            </div>
          </div>
          <div class="operate">
            <Checked class="checked-icon" color="#ee0a24" />
            <CheckNormal class="check-normal-icon" color="#ee0a24" />
          </div>
        </div>
      </nut-cell>
    </nut-cell-group>
  </div>
</template>
<script setup lang="ts">
import { IconFont, Checked, CheckNormal } from "@nutui/icons-vue-taro";
import { toRefs } from "vue";

import { ref, watch } from "vue";
const props = defineProps({
  info: Object,
});
const { info } = toRefs(props);
const isSpeedTicket = ref(false);
const emit = defineEmits(["getType"]);
watch(isSpeedTicket, (val) => {
  emit("getType", val);
});
</script>
<style lang="scss">
.order-detail-type-container {
  display: flex;
  flex-direction: column;
  .nut-cell-group {
    .nut-cell-group__title {
      margin-top: 0;
    }
  }
  .purchase-type-container {
    .item.active {
      background: #fff8f9;
      .content {
        .title {
          .txt {
            color: #ee0a24;
          }
        }
      }
      .operate {
        .checked-icon {
          display: block;
        }
        .check-normal-icon {
          display: none;
        }
      }
    }
    .item {
      padding: 20px;
      border-radius: 10px;
      border: 5px solid #fff8f9;
      display: flex;
      flex-direction: row;
      width: 100%;
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .title {
          display: flex;
          flex-direction: row;
          .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #ff6034, #ee0a24);
            height: 38px;
            width: 38px;
            border-radius: 50px;
            margin-right: 15px;
            .iconfont {
              font-size: 24px;
              color: #ffffff;
            }
          }
          .txt {
            font-weight: 500;
            color: #15181d;
            font-size: 32px;
          }
        }
        .desc {
          margin-top: 15px;
          color: #858a99;
          font-size: 24px;
        }
      }
      .price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        .title {
          display: flex;
          height: 35px;
          flex-direction: row;
        }
        .desc {
          color: #858a99;
          font-size: 24px;
        }
      }
      .operate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80px;
        .checked-icon {
          display: none;
        }
        .check-normal-icon {
          display: block;
        }
      }
    }
  }
}
</style>
